<template>
	<div>
		<agree-handle @taskSubmitEvent="taskSubmitEvent" ref="agreeHandler"></agree-handle>
		<refuse-handle @taskSubmitEvent="taskSubmitEvent" ref="refuseHandler"></refuse-handle>
		<return-handle @taskSubmitEvent="taskSubmitEvent" ref="returnHandler"></return-handle>

		<div style="flex: auto" v-if="taskExist">

			<template v-if="delegationTask">
				<el-button size="large" :icon="Select" type="primary" @click="executeOperMethod('pass')">
					提交
				</el-button>
			</template>
			<template v-else>

				<template v-if="operList.length > 2">
					<el-dropdown style="margin-right: 20px;" @command="executeOperMethod">
						<el-button :dark="true">
							更多
							<el-icon class="el-icon--right">
								<arrow-down />
							</el-icon>
						</el-button>

						<template #dropdown>
							<el-dropdown-menu>
								<template v-for="(item, index) in operList">
									<el-dropdown-item :command="item.key" :icon="$icon[item.icon]" v-if="index > 1">
										{{ item.name }}
									</el-dropdown-item>
								</template>
							</el-dropdown-menu>
						</template>
					</el-dropdown>

					<template v-for="(item, index) in operList">
						<el-button v-if="index <= 1"
							:icon="(item.key === 'pass' ? Select : (item.key === 'refuse' ? Close : ''))"
							:type="item.type" :dark="true" @click.stop="executeOperMethod(item.key)">
							{{ item.name }}
						</el-button>
					</template>
				</template>

				<template v-else>
					<template v-for="(item, index) in operList">
						<el-button :type="item.type"
							:icon="(item.key === 'pass' ? Select : (item.key === 'refuse' ? Close : ''))" :dark="true"
							@click.stop="executeOperMethod(item.key)">
							{{ item.name }}
						</el-button>
					</template>
				</template>				
			</template>
		</div>

	</div>
</template>
<script setup lang="ts">
// TODO: 工作流审批-详情页面-按钮组
import { ArrowDown, Select, Close } from "@element-plus/icons-vue";
import { ref, onMounted, defineExpose, watch } from 'vue'
import { queryTaskOperData } from "../../../api/base";

// 同意提交处理
import AgreeHandle from "../handler/agree.vue";
// 拒绝审核处理
import RefuseHandle from "../handler/refuse.vue";
// 驳回审核处理
import ReturnHandle from "../handler/return.vue";

defineExpose({ handle });

//是否是委派任务
const delegationTask = ref(false);
const taskId = ref();
const processInstanceId = ref();
const taskExist = ref(false)
const nodeId = ref();
const needSignature = ref(false);
const process = ref();

function handle(tId) {
	if (!tId || tId.length == 0) {
		return;
	}
	taskId.value = tId;

	queryTaskOperData(tId).then(res => {
		let data = res.data;
		processInstanceId.value = data.processInstanceId;
		nodeId.value = data.nodeId;
		needSignature.value = data.needSignature;
		delegationTask.value = data.frontJoinTask;

		taskExist.value = data.taskExist;
		process.value = data.process;
		let node = (data.node);
		if (node?.operList) {
			operList.value = node.operList.filter(k => k.checked);
		}
	})
}

// 提交任务
const submitTask = (name, fv) => {
	agreeHandler.value.handle(processInstanceId.value, taskId.value, fv, delegationTask.value, name, needSignature.value);
}

// 拒绝任务
const refuseTask = (name, fv) => {
	refuseHandler.value.handle(processInstanceId.value, taskId.value, fv, name, needSignature.value);
}

// 驳回任务
const returnTask = (name, fv) => {
	returnHandler.value.handle(processInstanceId.value, taskId.value, fv, name, needSignature.value);
}

const operList = ref([]);
const executeOperMethod = (op) => {
	emit('validateForm', op, function (valid, fv) {
		console.log("打开审批窗口就业面参数", op, valid, fv)
		if (valid) {
			let name = operList.value.filter(res => res.key === op)[0].name;
			if (op === 'refuse') {
				refuseTask(name, fv);
				return
			}
			if (op === 'pass') {
				submitTask(name, fv);
				return
			}
			if (op === 'return') {
				
				returnTask(name, fv);
				return
			}
		}
	})
}

const emit = defineEmits(["taskSubmitEvent", "validateForm"]);
const taskSubmitEvent = () => {
	emit('taskSubmitEvent')
}

const agreeHandler = ref();
const refuseHandler = ref();
const returnHandler = ref();

</script>

<style scoped lang="less"></style>
